<template>
  <van-sticky :offset-top="0">
    <van-search
      v-model="value"
      show-action
      :clearable="false"
      placeholder="请输入搜索关键词"
      @click-input="toSearch"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
  </van-sticky>
  <div class="home">
    <div class="home_swipe">
      <Swiper :swiper="images" />
    </div>
    <div class="home_list">
      <div>
        <span style="font-weight: bold">精选商品</span>
      </div>
      <div class="goods_box">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="10"
          ref="load"
          style="width: 100%"
        >
          <Goods :shop-list="shopList"></Goods>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script setup>
import Swiper from "@/components/Swiper.vue";
import Goods from "@/components/Goods.vue";
import { ref, onMounted, reactive } from "vue";
import { getShopList } from "@/api/shop";
import { useRouter, onBeforeRouteLeave } from "vue-router";

const value = ref("");
const images = ref([
  "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-p60-pro-white.png",
  "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-p60-pro-white.png",
]);
const page = reactive({
  pageSize: 10,
  page: 1,
});
const loading = ref(false);
const count = ref(0);
const load = ref("");
const finished = ref(false);
//精选商品列表
const shopList = ref([]);
//获取商品列表
const getList = async () => {
  loading.value = true;
  const { data } = await getShopList(page);
  shopList.value.push(...data.data);
  count.value = data.count;
  page.page = page.page + 1;
  loading.value = false;
  console.log(loading.value);
  localStorage.setItem("shopList", JSON.stringify(shopList.value));
  localStorage.setItem("page", JSON.stringify(page));
  if (shopList.value.length >= count.value) {
    finished.value = true;
  }
};
const router = useRouter();
const toSearch = () => {
  router.push("/search");
};
// 上拉加载数据;
const onLoad = async () => {
  // if (loading.value || finished.value) return;
  setTimeout(() => {
    getList();
  }, 2000);
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.home {
  background-color: #f5f5f5;
  height: 100%;
  margin-bottom: 50px;
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
b .home_search {
  position: fixed;
  top: 0;
  height: 57.6px;
  width: 100%;
  z-index: 1000;
}

.goods_box {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.goods_list {
  display: flex;
  flex-wrap: wrap;
}

.goods {
  width: calc((100% - 20px) / 2);
  margin: 5px;
  height: 240px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;

  &_img {
    width: 100%;
    height: 130px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &_desc {
    padding: 0 5px;

    text-align: left;
    margin-top: 5px;
    font-weight: bold;
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    display: -webkit-box; // 作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
    -webkit-line-clamp: 2; // 显示的行数
  }

  &_tag {
    padding: 0 5px;

    text-align: left;
    color: red;
    font-size: 12px;
    margin: 10px 0;
  }

  &_price {
    padding: 0 5px;
    text-align: left;
    color: red;
    font-weight: bold;
  }

  &_price::first-letter {
    font-size: 12px;
  }
}
</style>
